import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

import antdSheet from 'antd/dist/antd.css';

export default class MyDocument extends Document {
	render() {
    const styledSheet = new ServerStyleSheet();
    const main = styledSheet.collectStyles(<Main />);
    const styleTags = styledSheet.getStyleElement();
    return (
    	<html>
    		<Head>
    			<meta charSet="utf-8" />
    			<meta httpEquiv="content-type" content="text/html; charset=utf-8"/>
    			<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    			<title>前端适应性学习平台</title>
    			<script 
    				dangerouslySetInnerHTML={{
    				  __html: `window.__API_CONFIG__=${
    					  JSON.stringify(global.__API_CONFIG__
    					)}`
    				}}
    			/>	
    			<style dangerouslySetInnerHTML={{ __html: antdSheet }} />
    			{styleTags}
    		</Head>
    		<body>
    			<div className="root">{main}</div>
    			<NextScript />
    		</body>
    		<style jsx>{`
					body {
						background-color: #f0f2f5;
						background-image: url(/static/pic/bg.svg);
						width: 100%;
				    min-height: 100%;
				    background-repeat: no-repeat;
				    background-position: center;
				    background-size: 100%;
					}
					.root {
						height: 100%;
					}
    		`}</style>
    	</html>
    )
	}
} 
